<template>
  <div>
    <div v-if="shows == 'list'" class="list-page">
      <Header>
        <el-button size="small" type="primary" @click="add"
          >新建会员卡</el-button
        >
      </Header>
      <Main :data="listData" :footer-lock="false">
        <el-table-column
          label="会员卡名称"
          align="center"
          property="title"
        ></el-table-column>
        <el-table-column
          label="会员卡人数"
          align="center"
          property="peoples"
        ></el-table-column>
        <el-table-column
          label="生效时间"
          align="center"
          property="create_time"
        ></el-table-column>
        <el-table-column label="有效期" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.indate">{{ scope.row.indate }}天</span>
            <span v-else>永久</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span
              v-if="scope.row.status == 1 && scope.row.expired == 1"
              style="color:#909399;"
            >
              已到期
            </span>
            <span
              v-if="scope.row.status == 1 && scope.row.expired != 1"
              style="color:#67C23A;"
            >
              启用
            </span>
            <span v-if="scope.row.status == 0" style="color:#F56C6C;"
              >停用</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="250"
          class-name="tableoperation"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="msg(scope.row)">
              权益详情
            </el-button>
            <el-button
              v-if="scope.row.is_default == 0"
              size="mini"
              type="text"
              @click="setDefault(scope.row.card_id)"
            >
              设为默认
            </el-button>
            <el-button
              v-else
              size="mini"
              type="text"
              :disabled="scope.row.is_default == 1"
            >
              默认
            </el-button>
          </template>
        </el-table-column>
      </Main>
    </div>
    <card-form v-if="shows == 'add'" :edit-card-id="editCardId" @out="out" />
    <card-puls v-if="privilege == 'puls'" :card-id="cardId" @out="out" />
    <card-level v-if="privilege == 'level'" :card-id="cardId" @out="out" />
  </div>
</template>
<script>
import { VIPCARDLIST, ISDEFAULT } from "../service";

export default {
  components: {
    cardForm: () => import("./form"),
    cardPuls: () => import("./puls"),
    cardLevel: () => import("./level")
  },
  data() {
    return {
      listData: [],
      totals: 0,
      pages: 0,
      shows: "list",
      privilege: "",
      cardId: "",
      editCardId: ""
    };
  },

  created() {
    this.getList();
  },
  methods: {
    msg(e) {
      this.shows = "";
      if (e.type === "1") {
        this.privilege = "puls";
      } else {
        this.privilege = "level";
      }
      this.cardId = e.card_id;
    },
    add() {
      this.privilege = "";
      this.shows = "add";
    },
    out(id) {
      if (id) {
        this.shows = "add";
        this.editCardId = id;
      } else {
        this.shows = "list";
        this.editCardId = "";
        this.getList();
      }
      this.privilege = "";
    },
    async setDefault(cardId) {
      await ISDEFAULT({ card_id: cardId, is_default: 1 }).then(
        ({ code, msg }) => {
          if (code === 200) {
            this.getList();
          }
          this.$message({
            message: msg,
            type: code === 200 ? "success" : "error"
          });
        }
      );
    },
    async getList() {
      await VIPCARDLIST().then(({ code, data, msg }) => {
        if (code === 200) {
          if (data != null) {
            this.listData = data;
            this.shows = "list";
          } else {
            this.shows = "new";
          }
        } else {
          this.$message.error(msg);
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    }
  }
};
</script>
